<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="loadGeojson()">加载geojson</button>
        <button onclick="setRenderer()">简单渲染</button>
        <button onclick="setRenderer1()">唯一值</button>
        <button onclick="setRenderer2()">值域</button>
        <button onclick="setSymbol()">自己定义</button>
        <hr>
        <button onclick="_loadGeojson()">加载geojson</button>
        <button onclick="_setRenderer()">简单渲染</button>
        <button onclick="_setRenderer1()">唯一值</button>
        <button onclick="_setRenderer2()">值域</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });


        function loadGeojson() {
            layer = new cpc.GeojsonLayer("geojson", {
                url: "../json/geojson/national.geojson",
                // url:"./json/cluser/cluserPoint.json",
                //// renderer的值为entity的属性值
                // renderer:{
                //     type:"simple",
                //     symbol:{
                //         polygon:{
                //             material:new Cesium.Color.fromRandom({
                //                 alpha : 0.6
                //             }),
                //             outline:true,
                //             extrudedHeight:5000.0
                //         }
                //     }
                // }
            })
            layer.when(() => {
                layer.flyTo();
            });
            map.add(layer);

        }
        function setRenderer() {
            layer.setRenderer({
                type: "simple",
                symbol: {
                    polygon: {
                        material: new Cesium.Color.fromRandom(),
                        outline: true,
                        extrudedHeight: 5000.0,
                    }
                }
            })
        }
        function setRenderer1() {
            layer.setRenderer({
                type: "uniqueValue",
                field: "name",
                symbol: {
                    polygon: {
                        material: new Cesium.Color.fromRandom({
                            alpha: 0.6
                        }),
                        outline: true,
                        extrudedHeight: 5000.0
                    }
                },
                uniqueValueInfos: [
                    {
                        value: "福建省",
                        symbol: {
                            polygon: {
                                material: new Cesium.Color.fromRandom({
                                    alpha: 0.6
                                }),
                                outline: true,
                                extrudedHeight: 5000.0
                            }
                        },
                    },
                    {
                        value: "台湾省",
                        symbol: {
                            polygon: {
                                material: new Cesium.Color.fromRandom({
                                    alpha: 0.6
                                }),
                                outline: true,
                                extrudedHeight: 5000.0
                            }
                        },
                    }
                ]
            })
        }
        function setRenderer2() {
            layer.setRenderer({
                type: "classBreaks",
                field: "childrenNum",
                symbol: {
                    polygon: {
                        material: new Cesium.Color.fromRandom({
                            alpha: 0.6
                        }),
                        outline: true,
                        extrudedHeight: 5000.0
                    }
                },
                classBreakInfos: [
                    {
                        minValue: "5",
                        maxValue: "10",
                        symbol: {
                            polygon: {
                                material: new Cesium.Color.fromRandom({
                                    alpha: 0.6
                                }),
                                outline: true,
                                extrudedHeight: 5000.0
                            }
                        },
                    },
                    {
                        minValue: "10",
                        maxValue: "20",
                        symbol: {
                            polygon: {
                                material: new Cesium.Color.fromRandom({
                                    alpha: 0.6
                                }),
                                outline: true,
                                extrudedHeight: 5000.0
                            }
                        },
                    }
                ]
            })
        }
        function setSymbol() {
            //每个entity对象都会回调一次，对其做样式的更改
            layer.setSymbol((entity) => {
                if (entity.properties.name._value === "福建省") {
                    entity.polygon.material = Cesium.Color.RED
                    entity.polygon.extrudedHeight = 100000.0;
                } else if (entity.properties.name._value === "台湾省") {
                    entity.polygon.material = Cesium.Color.BLUE
                    entity.polygon.extrudedHeight = 90000.0;
                }
            })
        }
        function _loadGeojson() {
            _layer = new cpc.GeojsonLayer("geojson1", {
                url: "../json/cluser/cluserPoint.json",
            })
            _layer.when(() => {
                _layer.flyTo();
            });
            map.add(_layer);

        }
        function _setRenderer() {
            _layer.setRenderer({
                type: "simple",
                symbol: {
                    billboard: {
                        image: "../images/point/blueCamera.png"
                    },
                    label: new Cesium.LabelGraphics({
                        text: "${CameraType}${CameraCode}",//${}的形式获得属性值
                        color: new Cesium.Color.fromRandom(),
                        font: 'normal 32px MicroSoft YaHei',
                        showBackground: true,
                        scale: 0.5,
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT_CLICK,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 100000.0),
                        disableDepthTestDistance: 10000.0
                    })
                }
            })
        }
        function _setRenderer1() {
            // 这个数据中有很多CameraType=3h和4的值
            _layer.setRenderer({
                type: "uniqueValue",
                field: "CameraType",
                symbol: {
                    billboard: {
                        image: "../images/point/blueCamera.png"
                    }
                },
                uniqueValueInfos: [
                    {
                        value: "3",
                        symbol: {
                            billboard: {
                                image: "../images/point/start.png"
                            }
                        },
                    },
                    {
                        value: "4",
                        symbol: {
                            billboard: {
                                image: "../images/point/end.png"
                            }
                        },
                    }
                ]
            })
        }
        function _setRenderer2() {
            _layer.setRenderer({
                type: "classBreaks",
                field: "CameraType",
                symbol: {
                    billboard: {
                        image: "../images/point/blueCamera.png"
                    }
                },
                classBreakInfos: [
                    {
                        minValue: "0",
                        maxValue: "4",
                        symbol: {
                            billboard: {
                                image: "../images/point/end.png"
                            }
                        },
                    },
                    {
                        minValue: "4",
                        maxValue: "10",
                        symbol: {
                            billboard: {
                                image: "../images/point/start.png"
                            }
                        },
                    }
                ]
            })
        }
    </script>
</body>

</html>